#the-gameboard {
    flex: 75%;
    padding: 15px;
    text-align: left
}
.gameboard-column {
    padding: 5px;
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 3;
    text-align: center;
}
.gameboard-column:nth-of-type(3) {
    flex: 2;
}
.gameboard-column h3 {
    text-transform: uppercase;
    margin-bottom: 30px;
}
.gameboard-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    border-bottom: solid 1px white;
}
.gameboard-row:after {
    content: "";
    display: table;
    clear: both;
    margin-bottom: 30px;
}
.gameboard-row:last-of-type,
.scoreboard {
    border: 0;
}
.scoreboard .side {
    flex: 1;
}
.scoreboard-points {
    width: 34%;
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto;

}
.scoreboard-red {
    background-color: #750b20;
}
.scoreboard-blue {
    background-color: #19177C;
}
.scoreboard-points p {
    font-size: 48px;
    margin-top: 24px;
}
.gameboard-piece {
    margin:-11px;
}
.gameboard-piece p {
    font-size: 16px;
    padding:5px;
}
.gp-number {
    border: 1px solid white;
    border-radius: 25px;
    background-color: var(--secondary-background);
    color: white;
    padding:5px;
}

.gp-wrapper,
.points-wrapper {
    position: relative;
}

.gp-red,
.gp-blue,
.gp-points {
    position: relative;
    margin: 5px;
    border-radius: 4px;
    transform-style: preserve-3d;
    transition: transform 0.6s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.gp-red,
.gp-blue {
    min-width: 280px;
}
.gp-cover,
.gp-red,
.gp-blue,
.gp-points {
    min-height: 50px;
}
.gp-red {
    background-color: #750b20;
}
.gp-blue {
    background-color: #191970;
}
.gp-points {
    justify-content: center;
    flex: 1 !important;
}
.points-red {
    background-color: #750b20;
}
.points-blue {
    background-color: #191970;
}
.points-value {
    font-size: 24px;
}
.points-details {
    font-size: 12px;
    min-width: 82px;
    width: 90%;
    height: 70%;
}

.gp-cover {
    position: absolute;
    margin: 5px;
    border-radius: 4px;
    min-width: 280px;
    width: 95%;
    height: 70%;
    background-color: rgba(255, 255, 255, 0.1);
    transform-style: preserve-3d;
    transition: transform 0.6s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.gp-ability {
    padding-bottom: 5px;
}
.gp-time,
.gp-agent,
.gp-tid,
.gp-reveal {
    font-size: 12px;
}
.gp-pid {
    margin-top: 10px;
    font-size: 24px;
}
.golden-goose {
    position: relative;
}
.golden-goose span {
    float: right;
    margin-top: 10px;
    width: fit-content;
    position: absolute;
}
.gp-red .golden-goose span {
    left: 0;
}
.gp-blue .golden-goose span {
    right: 0;
}
.points-delta {
    flex: 1;
}
.points-cover {
    position: absolute;
    min-width: 82px;
    margin: 5px;
    width: 90%;
    height: 70%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
p.status {
    float: right;
    margin: 9px 10px 0px 0px;
    border-radius: 10px;
    padding: 0px 5px;
    background-color: grey;
    font-size: 11px;
    color: white;
}
.mid {
    transform-style: preserve-3d;
    transition: transform 0.6s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
h4 {
    margin: 20px 0px 0px 0px;
    font-family: var(--default-font);
    font-size: 20px;
    font-weight: normal;
    color: white;
}
hr {
    margin: 20px 0px;
}
pre {
    margin: 10px 20px;
}
pre.piece-query, pre.piece-cmd {
    border-style: solid;
    border-width: 1px;
    border-color: white;
    background-color: rgb(50,50,50);
    padding: 8px;
}
p.piece-query-type {
    margin-bottom: 5px;
}
.collapsible {
    border-radius: 4px;
    background-color: grey;
    padding: 15px 20px;
    text-align: left;
}
.collapsible:hover {
    background-color: rgb(100,100,100);
}
.collapsible:after {
    content: '\2795'; /* Unicode character for "plus" sign (+) */
    float: right;
    font-size: 20px;
    color: white;
}
.active {
    border-radius: 4px 4px 0px 0px;
    background-color: rgb(100,100,100);
}
.active:after {
    content: '\2796'; /* Unicode character for "minus" sign (-) */
    font-size: 20px;
    color: white;
}
.collapsible-content {
    border-radius: 0px 0px 4px 4px;
    overflow: hidden;
    padding: 10px;
    background-color: rgba(50,50,50,50%);
}
input.pin {
    margin: 10px 0px;
    border-radius: 4px;
    width: 10%;
    padding: 10px;
    background-color: rgb(50,50,50);
    text-align: left;
    color: white;
}
button.pin-save {
    float:right;
    width:20%;
    margin-top:20px;
    padding:0px;
}
.save-msg {
    float: right;
    margin: 25px;
    font-size: 15px;
    color: white;
}
#open-verify-modal {
    cursor: pointer;
    margin: auto;
    margin-top: 0;
    margin-bottom: 0;
    background-color: cornflowerblue;
    opacity: 0.8;
    color: white;
}
#guid-select-duk-icon #guid-select-duk-text {
    visibility: hidden;
    width: 400px;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    font-size: 13px;
    position: absolute;
    z-index: 1;
    bottom: 36%;
    margin-left: -124px;
}
#guid-select-duk-icon:hover #guid-select-duk-text {
    visibility: visible;
}
.gb-stats-table-row > th {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 8px;
    padding-bottom: 8px;
    border: 1px solid white;
    text-align: center;
}
.gb-stats-table-row > td {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 8px;
    padding-bottom: 8px;
    border: 1px solid white;
    text-align: center;
    font-weight: bold;
}
.gp-blue-pin {
    float: right;
    margin-top: 10px;
    width: fit-content;
    position: absolute;
}
.section-profile .gp-blue-pin img {
    background: none;
    border: none;
    height: 18px;
    margin: 5px;
}
#pin-blue-link-form {
    width: 60%;
    margin: auto;
    display: flex;
    justify-content: center;
}
#pin-link-host-select {
    width:40%;
    margin: 5px;
    margin-right: 30px;
    display: none;
}
.link-command {
    width: 78%;
    display: flex;
    align-items: center;
    margin: 5px;
}
#pin-blue-link-modal-link-name {
    color: white;
}
#pin-blue-link-modal-desc-text {
    color: white;
    width: 40%;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 30px;
}
#pin-blue-link-form .toggle {
    margin-top: 3px;
    width: 25%;
    margin-left: 20px;
}
#pin-blue-link-form .slider round {
    background-color:black;
}
#pin-blue-link-form span b {
    font-size: 13px;
}
#piece-pin-input {
    width: 28%;
    margin-top: 5px;
}
#pin-blue-link-submit {
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 43%;
    margin-top: 10px;
}
#pin-blue-link-submit-wrapper #save-pin-msg {
    display: none;
    float: right;
    margin-bottom: 0;
}
#match-parent-link-form-contents {
    width:75%;
    margin-bottom:-35px;
}
